let RED;
let GREEN;
let BLUE;
let brightness;
let pattern;
let position = 25;
let i = 0;
let turn=0;

let LED_Brightness = "/LED-Brightness"; //地址拼接
let LED_Color = "/LED-Color";
let LED_Pattern = "/LED-Pattern";
let Page_Init_b = "/Page-Init-b";
let Page_Init_p = "/Page-Init-p";
let LED_TURN = "/TURN-OFF_ON";

let Color = document.querySelector("#uname");
let Brightness = document.querySelector("#brightness");
let Span = document.querySelector("#span");
let TURN = document.getElementById("turn");
let TURNJUDGE = document.getElementById("turnjudge");

let Button0 = document.querySelector("#button0");
let Button1 = document.querySelector("#button1");
let Button2 = document.querySelector("#button2");
let Button3 = document.querySelector("#button3");

nevchange = function () {

  let line = document.querySelector(".line");
  let bgc = document.querySelector(".bgc");
  line.style.left = position + 10 + "px";
  bgc.style.left = position + "px";
  console.log(line.style.left);
  console.log(bgc.style.left);
  if (position == 25) { Button0.style.color = "#ffffff"; Button1.style.color = "#000"; Button2.style.color = "#000"; Button3.style.color = "#000"; }
  if (position == 175) { Button1.style.color = "#ffffff"; Button0.style.color = "#000"; Button2.style.color = "#000"; Button3.style.color = "#000"; }
  if (position == 325) { Button2.style.color = "#ffffff"; Button1.style.color = "#000"; Button0.style.color = "#000"; Button3.style.color = "#000"; }
  if (position == 475) { Button3.style.color = "#ffffff"; Button1.style.color = "#000"; Button2.style.color = "#000"; Button0.style.color = "#000"; }

};

Update = function () {


  // Send and recieve data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("GET", Page_Init_b, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      brightness = sendRequest.responseText;
      console.log("brightness :");
      console.log(brightness);
      Brightness.value = brightness;
      value = Math.floor(brightness / 2.55);
      Span.innerHTML = value;
    }
  };

  let dRequest = new XMLHttpRequest();
  dRequest.open("GET", Page_Init_p, true);
  dRequest.send(null);
  dRequest.onreadystatechange = function () {
    if (dRequest.readyState === 4 && dRequest.status === 200) {
      pattern = dRequest.responseText;
      console.log("pattern :");
      console.log(pattern);
      //ENTERN SOMETHING TO CHANGE NAVAGATION

      if (pattern == 0) position = 25;
      if (pattern == 1) position = 175;
      if (pattern == 2) position = 325;
      if (pattern == 3) position = 475;
      nevchange();
    }
  };

  let TURNRequest = new XMLHttpRequest();
  if(TURNJUDGE.checked) TURNRequest.open("GET", LED_TURN + "?turn=1" , true);
  else TURNRequest.open("GET", LED_TURN + "?turn=0" , true);
  TURNRequest.send("null");
  TURNRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {

    }
  };


  // if(turn==0){
  //   TURN.className="input";
  //   turn=1;
  //  }
  //  else
  //  {
  //   TURN.className="input checked";
  //   turn=0;
  //  }

  //  console.log("turn ：");
  //  console.log(turn);

};

setInterval("Update()", 600);

//window.addEventListener("load", Update());

Brightness.addEventListener("input", () => {
  brightness = Brightness.value;
  value = Math.floor(brightness / 2.55);
  Span.innerHTML = value;
  //show in console
  console.log("--brightness:  " + brightness + "--");
  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Brightness + "?brightness=" + brightness, true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

Color.addEventListener("input", () => {
  //十六进制颜色转RGB
  RED = parseInt(Color.value.slice(1, 3), 16);
  GREEN = parseInt(Color.value.slice(3, 5), 16);
  BLUE = parseInt(Color.value.slice(5, 7), 16);
  Color.click(); //出现问题处
  //show in console
  console.log("RED:  " + RED);
  console.log("GREEN:  " + GREEN);
  console.log("BLUE:  " + BLUE);
  //Send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open(
    "POST",
    LED_Color + "?RED=" + RED + "&GREEN=" + GREEN + "&BLUE=" + BLUE,
    true
  );
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});

//滑块变化部分
let line = document.querySelector(".line");
let slipNav = document.querySelector(".slipNav nav");
let slipAll = document.querySelectorAll(".slipNav nav a");
//给所有的a标签添加index属性，方便后面查找
for (let i = 0; i < slipAll.length; i++) {
  slipAll[i].setAttribute("data-index", i);
}
//鼠标移入底下的线跟着移动
slipNav.addEventListener("mouseover", function (e) {
  let target = e.target;
  let len = 150 * target.dataset.index + 35; // 计算当前的left值
  line.style.left = len + "px";
});
//鼠标移出时底下的线回到原来的位置
slipNav.addEventListener("mouseleave", function (e) {
  let selected = document.querySelector(".slipNav .selected");
  let len = 150 * selected.dataset.index + 35; // 线回到被选择元素的位置
  line.style.left = len + "px";
});
//鼠标点击时背景颜色的滑块滑倒相应的位置
slipNav.addEventListener("click", function (e) {
  let target = e.target;
  let bgc = document.querySelector(".bgc");
  //排他思想
  for (let i = 0; i < slipAll.length; i++) {
    slipAll[i].classList.remove("selected");
  }
  let len = 150 * target.dataset.index + 25; // 计算背景滑块left值
  if (target.dataset.index == 0) { Button0.style.color = "#ffffff"; Button1.style.color = "#000"; Button2.style.color = "#000"; Button3.style.color = "#000"; }
  if (target.dataset.index == 1) { Button1.style.color = "#ffffff"; Button0.style.color = "#000"; Button2.style.color = "#000"; Button3.style.color = "#000"; }
  if (target.dataset.index == 2) { Button2.style.color = "#ffffff"; Button1.style.color = "#000"; Button0.style.color = "#000"; Button3.style.color = "#000"; }
  if (target.dataset.index == 3) { Button3.style.color = "#ffffff"; Button1.style.color = "#000"; Button2.style.color = "#000"; Button0.style.color = "#000"; }

  bgc.style.left = len + "px";
});

Button0.addEventListener("click", () => {
  console.log("click button 0");
  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("GET", LED_Pattern + "?pattern=0", true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});
Button1.addEventListener("click", () => {
  console.log("click button 1");
  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=1", true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});
Button2.addEventListener("click", () => {
  console.log("click button 2");
  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=2", true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});
Button3.addEventListener("click", () => {
  console.log("click button 3");
  //send data
  let sendRequest = new XMLHttpRequest();
  sendRequest.open("POST", LED_Pattern + "?pattern=3", true);
  sendRequest.send(null);
  sendRequest.onreadystatechange = function () {
    if (sendRequest.readyState === 4 && sendRequest.status === 200) {
      console.log(sendRequest.responseText);
    }
  };
});


// window.addEventListener("load", () =>{
//   let TU = document.querySelector("#switch_on");
//   TU.children[0].checked =true;
//   console.log("loaded");
// });


//TURN 部分
document.getElementById("switch_btn").onclick = function () {

  if (this.children[0].checked == true) {
    this.children[1].className = "input checked"
  }
  else {
    this.children[1].className = "input"
  }


}